<!--输入框-->
<template>
  <el-progress v-if="value" :percentage="value" :color="style"></el-progress>
</template>

<script>
/* eslint-disable */
import Layers from "@/lang/layers";
import Dictionary from "@/lang/dict/dictionary";
import DictionaryProvider from "../provider/dictionary-provider";

/**
 * 进度条数据字典
 *
 * 按照区间范围，显示成不同的颜色
 */
export default {
    name: 'SeaDictionaryProgress'
    , props: {
        //值字段名
        value: {type: [String, Boolean, Number], default: ''}

        // 默认色值
        , defaultColor: {type: String, default: undefined}

        // 数据字典
        , options: {type: [Array, String], default: undefined}
        // 数据字典抓取函数
        , provider: {type: Function, default: DictionaryProvider}
    }
    , data() {
        return {
            // css样式
            style: ''
            // 标签值
            , label: undefined
            // 数据字典
            , dictionary: Dictionary.DEF
            // 数据字典
            , options_: undefined
            // 如果未匹配到样式，采用的样式
            , defaultStyle: ''
        }
    }
    , watch: {
        value: {
            handler: function () {
                this.match();
            }
        }
        , options: {
            handler: function (val) {
                // 表格单元格内，会有重复加载的问题，不过数据字典是有缓存的，问题不大
                this.provider(val).then(dic => {
                    this.dictionary = dic;
                    this.match();
                }).catch(e => {
                    this.dictionary = Dictionary.DEF;
                    this.match();
                    console.error(e);
                });
            }, immediate: true
        }
    }
    , created() {
        this.match();
    }
    , methods: {
        /**
         * 数据字典匹配
         */
        match: function () {
            if (Layers.isBlank(this.value)) {
                this.label = this.defaultLabel || '';
                this.style = '';
            } else {
                // match item
                let item = this.dictionary.matchByRange(this.value, this.defaultLabel, this.defaultColor)

                this.label = item.label;
                this.style = item.style;
            }
        }
    }
}
</script>
